// @ts-nocheck
import React from 'react'
import { Dropdown, Modal, message, Menu,Avatar } from 'antd';
import UpdatePassword from './partials/UpdatePassword'
import { useToggle } from '@/hooks';
import { ExclamationCircleOutlined, EditOutlined, LoginOutlined } from '@ant-design/icons';
import { logout } from '@/services/account';
import defaultAvatar from '@/assets/images/avatar.svg'
import styles from './index.module.less'


// 退出登录
function handleLogout() {
  Modal.confirm({
    title: '温馨提示',
    icon: <ExclamationCircleOutlined />,
    content: '您确定要退出当前登录吗?',
    okText: '确定',
    okType: 'primary',
    cancelText: '取消',
    onOk() {
      logout().then((res) => {
        if (res?.result === 1) {
          // ws.unsubscribe({ id: local.getUser().user.id });
          // local.delUser();
          // router.push('/');
          window.location.href = '/'
          message.success('退出成功!');
        }
        message.error('退出失败,请联系管理员!');
      }).catch = (e) => {
        console.log(e);
        message.error('退出失败,请联系管理员!');
      };
    },
    onCancel() {
      console.log('Cancel');
    },
  });
}

export default ({ avatar = defaultAvatar, user = 'admin' }) => {
  const [visible, toggleVisible] = useToggle()
  const overlay = (
    <Menu className={styles["overlay-menu"]}>
      <Menu.Item key="password">
        <EditOutlined />
        <span className={styles["text"]} onClick={toggleVisible}>修改密码</span>
      </Menu.Item>
      <Menu.Divider style={{ background: '#1E252F' }} />
      <Menu.Item key="loginout" onClick={handleLogout}>
        <LoginOutlined />
        <span className={styles["text"]}>退出登录</span>
      </Menu.Item>
    </Menu>
  )
  return (
    <>
      <Dropdown overlay={overlay}>
        <span className={styles["custom-account"]}>
          <Avatar src={avatar} alt="avatar" />
          {user}
        </span>
      </Dropdown>
      <UpdatePassword visible={visible} toggleVisible={toggleVisible} />
    </>
  )
}